<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #l-map{height:100%;width:100%;}
    #r-result{width:100%;}

  </style>
    <!-- jQuery 2.2.3 -->
<script src="/webjars/adminlte/2.3.11/plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fzF3kjX9LIMBcwWFVCmkwhvy0aGuIKsX"></script>
<!-- jvectormap -->
<script src="/webjars/adminlte/2.3.11/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/webjars/adminlte/2.3.11/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
  <script src="/map/js/TextIconOverlay_min.js"></script>
<script src="/map/js/MarkerClusterer.js"></script>
  <title>设置点是否可拖拽</title>
</head>
<body>
  <div id="l-map"></div>
  <div id="r-result">
    <input type="button" class="enableDrag" value="可拖拽" />
    <input type="button" class="disableDrag" value="不可拖拽" />
  </div>
<!--   <script type="text/javascript">
  $(function (){
		//获取设备状态列表，并在地图上更新   (普通模式)
	   $.ajax({
	    url:"/deviceStatus/data/list",
	    type:"GET",
	    success:function(result){
	      if(result.status=="200"){
	    	  console.log(result)
	        for(var ri = 0;ri < result.data.length;ri++) {//var ri = result.data.length-1;ri>=0;ri--
	          var r = result.data[ri];

	          //BaiDuMap.deletePoint(r.device.devCode);
	        	  changeMarkerFum(r.device.latitude,r.device.longitude,r.device.devCode,r.device.deviceName,r.device.address);
	        }
	      } else {
		  	
	      }
	    }
	  });
/* 		function initialize(longitude,latitude,zoom){

		} */
		function changeMarkerFum (latitude,longitude,no,deviceName,position) {
	// 百度地图API功能
	var changeMap = new BMap.Map("l-map");

	var point = new BMap.Point(116.400244,39.92556);
	changeMap.centerAndZoom(point, 12);
	// 百度地图API功能
	//var point = changeMap.point(longitude, latitude);
	changeMap.centerAndZoom(point, zoom);
	//map.setZoom(zoom); 
	changeMap.enableScrollWheelZoom(true);
	//单击获取点击的经纬度
	changeMap.addEventListener("click",function(e){
		changeMap.getLongLat(e.point.lng,e.point.lat);
	});
	changeMap.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
	changeMap.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	

	var myIcon = new BMap.Icon("/map/images/normal.png", new BMap.Size(32,37));
	var changeMarker = new BMap.Marker(point,{icon:myIcon});// 创建标注

		changeMap.addOverlay(changeMarker);   

          // 将标注添加到地图中
	var opts = {
			  width : 200,     // 信息窗口宽度
			  height: 100,     // 信息窗口高度
			  title : "海底捞王府井店" , // 信息窗口标题
			  enableMessage:true,//设置允许信息窗发送短息
			  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
			}
	var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
	changeMarker.addEventListener("mouseover", function(){          
		changeMap.openInfoWindow(infoWindow,point); //开启信息窗口
	});
	changeMarker.addEventListener("mouseout", function(){          
		changeMap.closeInfoWindow(); //开启信息窗口
	});
	// 可拖拽
	$(".enableDrag").on("click",function () {
		changeMarker.enableDragging();
	});
	// 不可拖拽
	$(".disableDrag").on("click",function () {
		changeMarker.disableDragging();         
	});
		}
  }); 

</script> -->
<script type="text/javascript">

var map=null,clickStatus=false;
	  var changeMap={
		   // 百度地图API功能
			map:function(mapId,obj){
				map = new BMap.Map(mapId,obj);
			},
			point:function(longitude,latitude){
				var point = new BMap.Point(longitude, latitude);
				return point;
			},
			initialize:function(longitude,latitude,zoom){
				// 百度地图API功能
				var point = changeMap.point(longitude, latitude);
				map.centerAndZoom(point, zoom);
				//map.setZoom(zoom); 
				map.enableScrollWheelZoom(true);
				//单击获取点击的经纬度
				map.addEventListener("click",function(e){
					changeMap.getLongLat(e.point.lng,e.point.lat);
				});
			},
			getLongLat:function(longitude,latitude){
				if(clickStatus){
					alert("经度:"+longitude + ",纬度:" + latitude);
				}
			}, 
			changeMarker:function (point,no,deviceName,position) {
			  //var map = new BMap.Map("l-map");
			  //var point = new BMap.Point(116.400244,39.92556);
			  //map.centerAndZoom(point, 12);
				// 自定义覆盖物
				function ComplexCustomOverlay(point){
			        this._point = point;
			        this._no = no;
			        this.no = null;
			        this._status = status;
			        this.status = null;
			    }
				
			    ComplexCustomOverlay.prototype = new BMap.Overlay();
			    ComplexCustomOverlay.prototype.initialize = function(map){
			        this._map = map;
			        var div = this._div = document.createElement("div");
			        div.className="active-alarm-pointer";
			        div.style.position = "absolute";
			        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);		        
			        var activeStyleDiv = "<div class='dot'></div>" +
			                             "<div class='pulse'></div>" +
			                             "<div class='pulse1'></div>";
			        div.innerHTML=activeStyleDiv;
//			        setTop(isTop: true)
			        
			        div.onmouseover = function(){
			        	//
			        }
			
			        div.onmouseout = function(){
			        	//
			        }
			        map.getPanes().labelPane.appendChild(div);
			        div.parentElement.style.zIndex=div.style.zIndex+1;//Let ripple be below the icon
			        return div;
			    }
			    ComplexCustomOverlay.prototype.draw = function(){
			        var map = this._map;
			        var pixel = map.pointToOverlayPixel(this._point);
			        this._div.style.left = pixel.x -40-8+'px';
					this._div.style.top = pixel.y -40+10+'px';
			    }
				
				ComplexCustomOverlay.prototype.getPosition = function () {
				    return this._point;
				}
			
			    //4、自定义覆盖物添加事件方法
			    ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
			        this._div['on'+event] = fun;
			    }
			  var myIcon = new BMap.Icon("/map/images/normal.png", new BMap.Size(32,37));
			  var marker = new BMap.Marker(point,{icon:myIcon});
				 marker.no = no;
				//设置图片偏移  
				 imageOffset:new BMap.Size(0,30)
				 offset:new BMap.Size(50,50), 
			  	marker.disableDragging();           // 不可拖拽
	          // 将标注添加到地图中
				// 拼接html字符串
				var sContent = "<div style='margin-top: -20px;'>"
					sContent += "<h3><div style='display: inline-block;'><strong style='font-size: 16px;'>设备名称:</strong><strong style='font-size: 16px;color:#f00;'>"+deviceName+"</strong></div></h3><hr style='margin-top: 0px;margin-bottom: 0px;'>";
					sContent += "<div style='padding: 4px;color: #666;min-width: 120px;'><div><table class='baidumap-tip-table'><tbody><tr><td class='tit' ><i class='fa fa-map-marker'></i>地址：</td><td colspan='2'>"+position+"</td></tr>";

					sContent += "<tr><td class='tit'><i class='fa  fa-cube'></i>设备号:</td><td colspan='2'>"+no+"</td></tr>";
					sContent +=	"</tbody></table></div></div>";
					sContent += "</div>";

					$(".BMap_pop").css("top","660px");//.BMap_pop{ top:660px; }
				var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象 
				marker.addEventListener("mouseover", function(){          
					map.openInfoWindow(infoWindow,point); //开启信息窗口
					//$(".floatPane").show();
				});
			    
				marker.addEventListener("mouseout", function(){          
					map.closeInfoWindow(); //开启信息窗口
					$(".BMap_pop").parent().show();
				});

				//console.log(marker)
			  map.addOverlay(marker);             // 将标注添加到地图中
			  console.log($(map.getPanes().floatPane).context.offsetTop)
				// 可拖拽
				function getChange(e){   
					//var getChangePoint=[e.point.lng,e.point.lat,e.currentTarget.no];
					var devcode = e.currentTarget.no;
					var lon = e.point.lng;
					var lan = e.point.lat;
					   $.ajax({
						    url:"/internal/device/position/save",
						    type:"POST",
						    data:"devCode="+devcode
						    	+"&lon="+lon
						    	+"&lan="+lan,//getChangePoint,
						    success:function(result){
						      if(result.status=="200"){
								
						      } else {
							  	
						      }
						    }
						  });
				}
				$(".enableDrag").on("click",function (e) {
					//e.preventdefault();
					marker.enableDragging();

					marker.addEventListener("onmouseup", getChange);
					return false;
				});
				// 不可拖拽
				$(".disableDrag").on("click",function () {
					marker.disableDragging();  
					marker.removeEventListener("onmouseup", getChange);
				});
			},//changeMarker end
			addDot:function(longitude,latitude,no,deviceName,position,status,linkMain1,linkPhone1,linkMain2,linkPhone2,linkMain3,linkPhone3,linkMain4,linkPhone4){
				var point = changeMap.point(longitude, latitude);
				changeMap.changeMarker(point,no,deviceName,position,status,linkMain1,linkPhone1,linkMain2,linkPhone2,linkMain3,linkPhone3,linkMain4,linkPhone4);
			},
	  }




  $(function(){
		changeMap.map("l-map",{minZoom:2,maxZoom:20});
	  changeMap.initialize('120.182111','30.228314',20);

		//获取设备状态列表，并在地图上更新   (普通模式)
	   $.ajax({
	    url:"/deviceStatus/data/list",
	    type:"GET",
	    async:false,
	    success:function(result){
	      if(result.status=="200"){
	        for(var ri = 0;ri < result.data.length;ri++) {//var ri = result.data.length-1;ri>=0;ri--
	          var r = result.data[ri];

	          //BaiDuMap.deletePoint(r.device.devCode);
	        	  changeMap.addDot(r.device.latitude,r.device.longitude,r.device.devCode,r.device.deviceName,r.device.address);
	        }
	      } else {
		  	
	      }
	    }
	  });


});
</script> 
</body>
</html>

